Skip to content

Add keyboard navigation to search #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 29, 2025

Conversation

xeniape
Copy link
Member

@xeniape xeniape commented Jun 26, 2025

Part of stackabletech/documentation#616

This PR adds the following navigation shortcuts to the search:

  • When focus on search input field and Enter is pressed -> Focus first search result
  • Navigation through search results with Up and Down arrow keys when search result in focus (the focus is basically on the link within the search result)
  • Default implementation of link handling with keyboard shortcuts in browser already present
    • Press Enter to open link in same tab
    • Press Shift + Enter to open link in a new window
    • Press Strg + Enter to open link in a new tab of the same window
  • Press / to get the search input field into focus again

Not an Javascript expert, so would be nice if someone could test the implementation and give some feedback if needed. Wrote a short Nuclino article on how I developed locally and how it can be tested: https://app.nuclino.com/Stackable/Engineering/Developing-with-Search-locally-bb51c5c1-d0e5-478f-8c3c-d6d64fd8d895

@xeniape xeniape self-assigned this Jun 26, 2025
@xeniape xeniape moved this to Development: Waiting for Review in Stackable Engineering Jun 26, 2025
@sbernauer sbernauer requested a review from Techassi July 7, 2025 07:15
Copy link
Member

@lfrancke lfrancke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the docs. I tried it locally and it worked.
For the record: I saw it fail a few times but could not reproduce. I looked at the source code as well and don't think it should make anything worse. Therefore I believe this is good to go even though it could be improved later.

Two things I'd love to improve at some point (I talked to Xenia about this)

  • Pressing up/down in the search box now moves to the beginning/end of the edit box and I'd love it if it could instead move to the first/last serch result
  • Only the "link" is highlighted in the search results. It'd be nice if we could highlight the entire "cell"

@lfrancke lfrancke moved this from Development: Waiting for Review to Development: In Review in Stackable Engineering Jul 29, 2025
@xeniape xeniape merged commit b565c5d into stackable Jul 29, 2025
2 checks passed
@xeniape xeniape deleted the add-keyboard-navigation-in-search branch July 29, 2025 11:59
@lfrancke lfrancke moved this from Development: In Review to Development: Done in Stackable Engineering Jul 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Development: Done
Development

Successfully merging this pull request may close these issues.

2 participants